import React, {Fragment} from "react";
import {Table} from "antd";
import {AxiosPromise} from "axios";
import useKeepState from 'use-keep-state'
import useDebounceFn from "../../hooks/useDebounceFn";
import ActionPanel from "../ActionPanel";

interface Props {
    getTableData: (data: any) => AxiosPromise
    onTableChange?: (pagination: any, filters: any, sorter: any) => void
    onDelete?: (id: string) => AxiosPromise
    onAdd?: () => void

    [key: string]: any
}

interface State {
    scrollY: number
    tableDataSource: any[]
    isLoading: boolean
    pagination: {
        [key: string]: any
    }
    selectedRowKeys: string[]
    columns: any[]
}

const DEFAULT_PAGE_SIZE = 10;
const initState: State = {
    scrollY: 0,
    tableDataSource: [],
    isLoading: false,
    pagination: {
        current: 1,
        pageSize: DEFAULT_PAGE_SIZE,
        showSizeChanger: true,
        total: 0,
        pageSizeOptions: ['10', '20', '50', '100', '200'],
    },
    selectedRowKeys: [],
    columns: [],
};


const GeneralTable = ({
                          getTableData,
                          onTableChange,
                          onDelete,
                          onAdd,
                          forwardedRef: tableRef, // 组件标签传过来的prop
                          columns,
                          rowSelection: rowSelectionFromParent,
                      }: Props) => {

    let rowSelection: any = rowSelectionFromParent || undefined;
    const showRowSelection: any = onDelete;
    const [state, setState] = useKeepState(initState);
//创建一个防抖函数
    const {run: getData} = useDebounceFn(() => {
        setState({isLoading: true});
        const {pageNo, pageSize} = tableRef.current;
        //调用父组件函数获取数据
        getTableData({
            pageNo: pageNo - 1,
            pageSize,
        }).then(res => {
            if (res?.data?.success) {
                setState({
                    pagination: {
                        ...state.pagination,
                        total: res.data.data.count,
                        pageSize,
                    },
                    tableDataSource: res.data.data.rows,
                })
            }
        }).finally(() => {
            setState({isLoading: false});
        });

    }, {maxWait: 500, leading: true},);

    function handleDelete() {

    }

    function showTotal(total: number) {
        return `共有${total}条`
    }

    function onChange(pagination: any, filters: any, sorter: any) {
        const pageNo = pagination.current;
        const pageSize = pagination.pageSize;
        setState({
            pagination: {
                ...state.pagination,
                pageNo,
                pageSize,
            },
        });
        tableRef.current.pageNo = pageNo
        tableRef.current.pageSize = pageSize
        onTableChange?.(pagination, filters, sorter)
        setTimeout(() => {
            getData()
        }, 0)
    }

    return (
        <Fragment>
            <ActionPanel
                selectedRowKeys={state.selectedRowKeys}
                onDelete={onDelete && handleDelete}
                onAdd={onAdd}
                onUpdate={handleDelete}

            />


            <Table
                rowKey="id"
                loading={state.isLoading}
                columns={columns as any[]}
                dataSource={state.tableDataSource}
                scroll={{x: 1200, y: state.scrollY}}
                showHeader={state.tableDataSource.length}
                onChange={onChange}
                rowSelection={rowSelection}
                pagination={{
                    ...state.pagination,
                    size: 'small',
                    total: showTotal,
                }}
            />

        </Fragment>
    );
};

export default GeneralTable;
